<!--
 * @Author: zhangyun
 * @Date: 2021-04-22 09:37:40
 * @LastEditors: zhangyun
 * @LastEditTime: 2021-04-27 12:08:25
 * @Desc: 
-->
<template>
  <section class="bg-white rounded flex flex-col justify-between shadow w-96">
    <div class="operation_option flex justify-around mt-6">
      <article
        class="reply_answer flex flex-col hover:text-blue-400 cursor-pointer text-gray-600"
        @click="createHref('replyAnswer')"
      >
        <div class="icon w-10 h-10 rounded-full bg-blue-200 text-center">
          <i class="iconfont icon-wenti text-3xl leading-10 text-blue-400 my-2"></i>
        </div>
        <span class="name text-xs py-4">回答问题</span>
      </article>
      <article
        class="push_video flex flex-col hover:text-blue-400 cursor-pointer text-gray-600"
        @click="createHref('pushVideo')"
      >
        <div class="icon w-10 h-10 rounded-full bg-yellow-400 text-center">
          <i class="iconfont icon-shipin text-3xl leading-10 text-yellow-600 my-2"></i>
        </div>
        <span class="name text-xs py-4">发视频</span>
      </article>
      <article
        class="write_article flex flex-col hover:text-blue-400 cursor-pointer text-gray-600"
        @click="createHref('writeArticle')"
      >
        <div class="icon w-10 h-10 rounded-full bg-yellow-200 text-center">
          <i class="iconfont icon-shuxiebianji text-3xl leading-10 text-yellow-400 my-2"></i>
        </div>
        <span class="name text-xs py-4">写文章</span>
      </article>
      <article
        class="write_idea flex flex-col hover:text-blue-400 cursor-pointer text-gray-600"
        @click="handleWriteIdea"
      >
        <div class="icon w-10 h-10 rounded-full bg-green-200 text-center">
          <i class="iconfont icon-xiangfa text-3xl leading-10 text-green-400 my-2"></i>
        </div>
        <span class="name text-xs py-4">写想法</span>
      </article>
    </div>
    <footer class="h-14 flex border-t">
      <div
        class="reply flex-1 text-gray-600 text-xs text-center leading-14 cursor-pointer hover:text-blue-800"
        @click="handleReply"
      >
        稍后答
      </div>
      <div class="slider"></div>
      <div
        class="draft_box flex-1 text-gray-600 text-xs text-center leading-14 cursor-pointer hover:text-blue-800"
        @click="handleDraft"
      >
        草稿箱
      </div>
    </footer>
  </section>
  <Dialog :visible="visible" @close="handleClose">
    <header class="text-3xl text-center py-3 font-black">写想法</header>
    <div class="m-3 border rounded overflow-hidden">
      <textarea
        class="focus:outline-none w-full h-full p-2 resize-none"
        type="textarea"
        :rows="6"
        v-model="ideaForm.idea"
      />
    </div>
    <footer class="py-3 text-center">
      <button class="w-24 px-4 py-1 bg-blue-600 text-white focus:outline-none active:bg-blue-200" @click="submitIdea">
        发布
      </button>
    </footer>
  </Dialog>
</template>

<script lang="ts">
import { defineComponent, reactive, ref, getCurrentInstance } from 'vue'
import { useRouter } from 'vue-router'
import Dialog from '../Dialog/index.vue'
import { resetForm } from '../../utils/index'
import * as _ from 'lodash'

interface ideaForm {
  idea: string
}

export default defineComponent({
  name: 'Edit',
  components: { Dialog },
  setup() {
    const router = useRouter()
    const { ctx } = getCurrentInstance() as any // 绑定vue原型上的属性获取
    const ideaForm = reactive<ideaForm>({ idea: '' })
    function handleDraft() {
      console.log('草稿箱')
    }
    function handleReply() {
      console.log('稍后答')
    }
    // 写想法
    const visible = ref(false)
    function handleWriteIdea() {
      visible.value = true
    }
    function handleClose() {
      visible.value = false
      resetForm(ideaForm)
    }
    // 跳转到编辑页
    function createHref(key: string) {
      const { href } = router.resolve({
        path: '/creator/' + key,
      })
      window.open(href, '_blank')
    }

    async function submitIdea() {
      const userInfoStr = localStorage.getItem('user_info') || ''
      const userInfo = JSON.parse(userInfoStr)
      if (_.isEmpty(userInfo)) {
        alert('请登陆')
        return false
      }
      const res = await ctx.$http.post('/api/idea', { user: userInfo.user, idea: ideaForm.idea })
      handleClose()
      alert(res.message)
    }
    return {
      handleDraft,
      handleReply,
      handleWriteIdea,
      handleClose,
      visible,
      ideaForm,
      submitIdea,
      createHref,
    }
  },
})
</script>
